<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>输入框集合示例</title>
	<link rel="stylesheet" type="text/css" href="../../dist/css/hisui.min.css">
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
	<script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>
	<style>
		td{
			padding: 5px 0;
		}
		.pdl5{
			padding-left: 10px;
		}
		.pdl5 code{
			font-family:monospace;
		}
	</style>
	<script type="text/javascript">
		$.fn.datebox.defaults.formatter = function(date){
			var y = date.getFullYear();
			var m = date.getMonth()+1;
			var d = date.getDate();
			return y+"-"+m+'-'+d;
		}
	</script>
</head>
<body>
	<h2>验证所有可输入框的长度</h2>
	<h3>一. 下面所有输入框在IE11,IE8,Chrome下长度一致</h3>
	<div class="demo-exp-code entry-content"> 
		<div class="hisui-panel" title="默认" style="width:600px;padding:10px;" data-options="headerCls:'panel-header-gray',iconCls:'icon-paper',closable:true,collapsible:true,minimizable:true,maximizable:true">
			<table>
				<tr>
					<td class="r-label">邮箱</td>
					<td>
						<input class="hisui-validatebox" data-options="required:true,validType:'email'">
					</td>
					<td class="pdl5">
						<code>class="hisui-validatebox"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">日期</td>
					<td>
						<input class="hisui-datebox">
					</td>
					<td class="pdl5">
						<code>class="hisui-datebox"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">时间</td>
					<td>
						<input class="hisui-datetimebox">
					</td>
					<td class="pdl5">
						<code>class="hisui-datetimebox"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">数字</td>
					<td>
						<input class="hisui-numberbox">
					</td>
					<td class="pdl5">
						<code>class="hisui-numberbox"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">数字</td>
					<td>
						<input class="hisui-numberspinner">
					</td>
					<td class="pdl5">
						<code>class="hisui-numberspinner"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">下拉选择</td>
					<td>
						<select class="hisui-combobox"
						data-options="enterNullValueClear:false,blurValidValue:true">
							<option value="AK">Alaska</option>
							<option value="CT">Connecticut</option>
							<option value="DE">Delaware</option>
							<option value="LA">Louisiana</option>
							<option value="MD">Maryland</option>
							<option value="ND">North Wanhgc Dakota</option>
							<option value="OH" selected>Ohio</option>
							<option value="WY">Wyoming</option>
						</select>
					</td>
					<td class="pdl5">
						<code>class="hisui-combobox"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">快速日期</td>
					<td>
						<input class="hisui-dateboxq">
					</td>
					<td class="pdl5">
						<code>class="hisui-dateboxq"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">快速时间</td>
					<td>
						<input class="hisui-datetimeboxq">
					</td>
					<td class="pdl5">
						<code>class="hisui-datetimeboxq"</code>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<h3>二.加上class="textbox"</h3>
	<div class="demo-exp-code entry-content"> 
		<div class="hisui-panel" title="textbox" style="width:600px;padding:10px;" data-options="headerCls:'panel-header-gray',iconCls:'icon-paper',closable:true,collapsible:true,minimizable:true,maximizable:true">
			<table>
				<tr>
					<td class="r-label">序号</td>
					<td>
						<input id="patno" class="textbox">
					</td>
					<td class="pdl5">
						<code>class="textbox"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">邮箱</td>
					<td>
						<input class="hisui-validatebox textbox" data-options="required:true,validType:'email'">
					</td>
					<td class="pdl5">
						<code>class="hisui-validatebox textbox"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">日期</td>
					<td>
						<input class="hisui-datebox textbox">
					</td>
					<td class="pdl5">
						<code>class="hisui-datebox textbox"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">时间</td>
					<td>
						<input class="hisui-datetimebox textbox">
					</td>
					<td class="pdl5">
						<code>class="hisui-datetimebox textbox"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">数字</td>
					<td>
						<input class="hisui-numberbox textbox">
					</td>
					<td class="pdl5">
						<code>class="hisui-numberbox textbox"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">数字</td>
					<td>
						<input class="hisui-numberspinner textbox">
					</td>
					<td class="pdl5">
						<code>class="hisui-numberbox textbox"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">下拉选择</td>
					<td>
						<select class="hisui-combobox textbox"
						data-options="enterNullValueClear:false,blurValidValue:true">
							<option value="AK">Alaska</option>
							<option value="CT">Connecticut</option>
							<option value="DE">Delaware</option>
							<option value="LA">Louisiana</option>
							<option value="MD">Maryland</option>
							<option value="ND">North Wanhgc Dakota</option>
							<option value="OH" selected>Ohio</option>
							<option value="WY">Wyoming</option>
						</select>
					</td>
					<td class="pdl5">
						<code>class="hisui-combobox textbox"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">快速日期</td>
					<td>
						<input class="hisui-dateboxq textbox">
					</td>
					<td class="pdl5">
						<code>class="hisui-dateboxq textbox"</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">快速时间</td>
					<td>
						<input class="hisui-datetimeboxq textbox">
					</td>
					<td class="pdl5">
						<code>class="hisui-datetimeboxq textbox"</code>
					</td>
				</tr>
			</table>
		</div>
	</div>
	
	<h3>三.固定宽度</h3>
	<div class="demo-exp-code entry-content"> 
		<div class="hisui-panel" title="width=155px" style="width:600px;padding:10px;" data-options="headerCls:'panel-header-gray',iconCls:'icon-paper',closable:true,collapsible:true,minimizable:true,maximizable:true">
			<table>
				<tr>
					<td class="r-label">邮箱</td>
					<td>
						<input class="hisui-validatebox" style="width:148px" data-options="required:true,validType:'email'">
					</td>
					<td class="pdl5">
						<code>148px</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">日期</td>
					<td>
						<input class="hisui-datebox" style="width: 155px;">
					</td>
					<td class="pdl5">
						<code>155px</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">时间</td>
					<td>
						<input class="hisui-datetimebox" style="width:155px">
					</td>
					<td class="pdl5">
						<code>155px</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">数字</td>
					<td>
						<input class="hisui-numberbox" style="width:155px">
					</td>
					<td class="pdl5">
						<code>155px</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">数字</td>
					<td>
						<input class="hisui-numberspinner" style="width:155px">
					</td>
					<td class="pdl5">
						<code>155px</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">下拉选择</td>
					<td>
						<select class="hisui-combobox" style="width:155px"
						data-options="enterNullValueClear:false,blurValidValue:true">
							<option value="AK">Alaska</option>
							<option value="CT">Connecticut</option>
							<option value="DE">Delaware</option>
							<option value="LA">Louisiana</option>
							<option value="MD">Maryland</option>
							<option value="ND">North Wanhgc Dakota</option>
							<option value="OH" selected>Ohio</option>
							<option value="WY">Wyoming</option>
						</select>
					</td>
					<td class="pdl5">
						<code>155px</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">快速日期</td>
					<td>
						<input class="hisui-dateboxq" style="width:155px">
					</td>
					<td class="pdl5">
						<code>155px</code>
					</td>
				</tr>
				<tr>
					<td class="r-label">快速时间</td>
					<td>
						<input class="hisui-datetimeboxq" style="width:155px">
					</td>
					<td class="pdl5">
						<code>155px</code>
					</td>
				</tr>
			</table>
			<ul>
				<li>单独validatebox默认为context-box模型，148 + 5 + 1 + 1 = 155px</li>
				<li>如果配置了width属性，生成有warp组件时取的是width属性的值</li>
				<li>如果没配置width属性，生成有warp组件时取的是_outWidth的值</li>
				<li>所以q系列为保证width不变,只能使用border-box模型</li>
			</ul>
		</div>
	</div>
</body>
</html>